<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 435px;height: 264px;"></div>
	</div>
</template> 

<script>
	export default {
		name: 'monitoringEc2',
		methods: {
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;  //通过ref获取到DOM节点
				let myColor =['#46BDF2','#F5C338 '];
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				//配置图表
				const option = {
					backgroundColor: '#00043A',
					
					tooltip: {
						trigger: 'item',
						show: true
					},
					radar: {
						center: ["50%", "50%"],
						radius: "60%",
						startAngle: 90,
						splitNumber: 4,
						shape: "circle",
						splitArea: {
						    areaStyle: {
						    color: ["transparent"]
							},
						},
						axisLine: {
						    show: true,
						    lineStyle: {
						        color: "white"
						    }
						},
						splitLine: {
						    show: true,
						    lineStyle: {
						        color: "white"
						    }
						},
						name: {
							color:'#DFF8FF',
							formatter: function (val) {
							    var strs = val.split(' ');
							    var str = strs[0]+'\n'+strs[1]
							    return str
							},
						},
						indicator: [{
							"name": "发明专利申请 累计数",
							"max": 100
						}, {
							"name": "PCT专利申请 累计数",
							"max": 100
						}, {
							"name": "PCT专利申请 累计数",
							"max": 100
						}, {
							"name": "发明专利授权 累计数",
							"max": 100
						}]
					},
					series: [{
						name: '2019',
						type: 'radar',
						symbol: "circle",
						symbolSize: 7,
						areaStyle: {
							color:myColor[0],
						},
						itemStyle:{
						    borderWidth:3,
							color:myColor[0],
						},
						lineStyle: {
						    
						},
						data:[[80, 100, 100, 30]]
					},
					{
						name: '2020',
						type: 'radar',
						symbol: "circle",
						symbolSize: 7,
						
						areaStyle: {
							color:myColor[1],
						},
						itemStyle:{
						    borderWidth:3,
							color:myColor[1],
						},
						lineStyle: {
						    
						},
						data:[[55, 55, 70, 20]]
					}]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
				    myChart.resize();  //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
